<style lang="less">
	.scroll {
		background-size: 100% auto;
		background-position: left top;
		background-repeat: no-repeat;
	}
	.scrollto {}
</style>
<template>
	<scroll-view
		scroll-y
		@scrolltolower="loadMore"
		@scrolltoupper="topMore"
		@scroll="loadScroll"
		:style="{ height: maxHeight + 'px', background: bgColor }"
		:data-height="sysInfo.windowHeight"
		:lower-threshold="100"
		class="scroll">
		<view class="scrollto" :style="{'margin-bottom': bottom + 'px'}" :data-loads="loads">
			<slot name="content"/>
			<loadmore :status="more" v-if="loads>0" />
			<div class="mone" v-else>
				<emptys v-if="empty"></emptys>
			</div>
			<view class="h10" v-if="loads>0" />
		</view>
	</scroll-view>
</template>
<script type="text/javascript">
	/**
	 * Created by PhpStorm.
	 * User:  iyahe@qq.com (天明)
	 * Date: 2020/1/3 0003
	 * Time: 下午 12:19
	 * Description:
	 */
	import loadmore from '@/components/plugins/more';
	import emptys from '@/components/layout/empty'
	export default {
		props : {
			bgColor:{
				type: String,
				default: 'not specified'
			},
			loads:{
				type: Number,
				default: 1
			},
			bottom:{
				type: Number,
				default: 1
			},
			empty:{
				type: Boolean,
				default: false
			},
			aBottom: {
				type: Number,
				default: 0
			},
			down1: {
				type: Number,
				default: 1
			}
		},
		data() {
			return {
				sysInfo: Object,
				toBottom: 0,
				toTop: 0,
				more: 'more',
				maxHeight: 0
			}
		},
		watch: {
			// TODO 定义: 1 滑动底部加载更多 2正在加载中,  3 全部加载完成,
			loads (val) {
				const names = ['more','loading','noMore'];
				this.more = names[val-1];
			},
			aBottom (val) {
				this.topPlgs();
			},
			down1 (numer) {
				this.maxHeight = this.maxHeight - numer;
			}
		},
		components: {
			loadmore,
			emptys
		},
		methods: {
			// TODO 滚动到底部/右边时触发
			loadMore (e) {
				this.$emit('bottom', this.toBottom++);
			},
			// TODO 滚动时触发
			loadScroll (e) {
				this.$emit('scroll', e.target);
			},
			topMore (e) {
				this.$emit('top', this.toTop++);
			},
			topPlgs() {
				this.maxHeight = this.maxHeight - this.aBottom;
			}
		},
		created() {
			this.sysInfo = this.$wxapi.sysInfo();
			this.maxHeight = this.sysInfo;
			this.topPlgs();
		}
	}
</script>
